<template>
  <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
    <md-page title="" :showLeft="false">
      <view class="container">
        <!-- 头部图片 + 文本 -->
        <view class="top">
          <view class="card" @click="() => handleJump(data.list?.slice(0, 1)?.[0])">
            <md-icon
              name="hot"
              width="67"
              height="76"
              class="hot-icon position"
              v-if="data.list?.slice(0, 1)?.[0]?.is_hot == 1" />
            <image class="image" mode="widthFix" :src="data.list?.slice(0, 1)?.[0]?.img" />
            <view class="text ellipsis-2">{{ data.list?.slice(0, 1)?.[0]?.title }}</view>
            <view class="flex-l m-top-8" style="justify-content: flex-end">
              <md-icon name="clock" width="30" height="30" />
              <view class="date">
                {{ data.list?.slice(0, 1)?.[0]?.starttime + ' ~ ' + data.list?.slice(0, 1)?.[0]?.endtime }}
              </view>
            </view>
          </view>
        </view>
        <view
          class="item m-bottom-20"
          v-for="item in data.list.slice(1)"
          :key="item.text"
          @click="() => handleJump(item)">
          <md-icon name="hot" width="67" height="76" class="hot-icon position" v-if="item.is_hot == 1" />
          <image class="image" :src="item.img"></image>
          <view class="content">
            <view class="text ellipsis-2">{{ item.title }}</view>
            <view class="flex-l" style="justify-content: flex-end">
              <md-icon name="clock" width="30" height="30" />
              <view class="date">{{ item.starttime + ' ~ ' + item.endtime }}</view>
            </view>
          </view>
        </view>
      </view>
    </md-page>
  </mescroll-body>
  <!-- 底部导航 -->
  <bottom-tab-bar :selected="1" />
</template>

<script setup lang="ts">
import { reactive } from 'vue';
// 组件
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom);
// 接口
import { newsIndex } from '@/api';
import type { Information } from '@/api/data';

const data = reactive<{ list: Information.Index.Data[] }>({
  list: [],
});

function handleJump(item: Information.Index.Data) {
  if (item?.is_link == 1) {
    uni.navigateTo({
      url: '/pages/other/webview/index?url=' + encodeURIComponent(item.link),
    });
  } else {
    uni.navigateTo({
      url: '/pages/news/detail?id=' + item?.id,
    });
  }
}

/**
 * 接口相关
 */
// 热门新闻
const upCallback = (mescroll: any) => {
  newsIndex({ page: mescroll.num, limit: mescroll.size })
    .then(res => {
      const curPageData = res?.data?.data || []; // 当前页数据
      if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
      data.list = data.list.concat(curPageData); //追加新数据
      //方法一(推荐): 后台接口有返回列表的总页数 totalPage
      mescroll.endByPage(curPageData.length, res?.data?.total || 0);
    })
    .catch(() => {
      mescroll.endErr(); // 请求失败, 结束加载
    });
};
</script>
<style lang="scss" scoped>
.container {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  & > view {
    margin-bottom: 20rpx;
  }
}

.top {
  background: white;
  padding: 40rpx 30rpx 30rpx;
}

.hot-icon {
  // width: 67rpx;
  // height: 76rpx;
  // background: pink;
  position: absolute;
  z-index: 1;
}

.card {
  position: relative;
  .hot-icon.position {
    top: -30rpx;
    left: -16rpx;
  }
  .image {
    width: 690rpx;
    height: 320rpx;
  }
  .text {
    font-size: $fs-34;
    color: $title;
    font-weight: bold;
  }
  .date {
    text-align: right;
    color: $sub;
  }
}

.item {
  position: relative;
  .hot-icon.position {
    top: 0rpx;
    left: 10rpx;
  }
  background: white;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: flex;
  .image {
    width: 227rpx;
    height: 180rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
  }
  .content {
    margin-left: 10rpx;
    padding: 16rpx 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .text {
      font-size: $fs-28;
      padding-left: 10rpx;
    }
  }
}
</style>
